<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <form>
    <p>
      <!--使用v-model指令和data中某个属性关联之后，
        输入框的数据会自动的放到对应的属性中
        对应的属性值发生改变之后，输入中显示的数据也会改变
        -->
      用户名： <input type="text" v-model="user.userName">
    </p>
    <p>
      年龄：　<input type="text" v-model="user.userAge">
    </p>
    <p>
      性别：　
      <input type="radio" value="0" v-model="user.gender"> 女
      <input type="radio" value="1" v-model="user.gender"> 男
    </p>
    <p>
      爱好：　
      <input type="checkbox" value="sport" v-model="user.hobbies"> 运动
      <input type="checkbox" value="film" v-model="user.hobbies"> 电影
      <input type="checkbox" value="game" v-model="user.hobbies"> 游戏
      <input type="checkbox" value="study" v-model="user.hobbies"> 学习
    </p>
    <input type="button" value="添加用户" @click="addUser()">
  </form>
</div>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: {
        userName: null,
        userAge: null,
        gender: 1,
        hobbies: []
      }
    },
    methods: {
      addUser: function () {
        // 要添加用户信息: this.user
        // 要请求的地址
        var url = "http://localhost:63342/day02/data/user.json";
        // 发送请求
        // 默认情况下： 发送的数据的格式是 json
        // 观测浏览器的请求头：
        //    content-Type的值是：  application/json;charset=UTF-8
        // 发送的实际的数据内容（request payload）是：
        //            {"userName":"1111","userAge":"23","gender":1,"hobbies":["sport","film"]}
        axios.post(url,this.user)
        .then(function (res) {
          console.log(res)
        })
        .catch(function (err) {
          console.log(err)
        })

      }
    }
  });
</script>
</body>
</html>
